<!DOCTYPE html>
<html>

<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        #u1 li {
            margin-bottom: 10px;
            background-color: Orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }
        
        #u1 li ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        #u1 li ul li {
            background-color: pink;
        }
    </style>

</head>

<body>
    <div style=" width:200px; height:500px; border:1px solid red;">
        <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
            <li>
                幼儿园同学
                <ul>
                    <li>鼻涕虫</li>
                    <li>爱哭鬼</li>
                    <li>张大胆</li>
                </ul>
            </li>
            <li>小学同学
                <ul>
                    <li>张三丰</li>
                    <li>张无忌</li>
                    <li>乔布斯</li>
                </ul>
            </li>
            <li>
                初中同学
                <ul>
                    <li>盖茨</li>
                    <li>川普</li>
                    <li>奥巴马</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>
<script src="./jquery-1.12.2.js"></script>
<script>
    $(function() {
        //隐藏每个分类下面的成果
        $('#u1>li>ul>li').hide()

        //点击分类项让其下面的成员显示，同时要让其他分类项下面的成员隐藏
        $('#u1>li').click(function() {
            $(this).children('ul').find('li').show(250)
            $(this).siblings('li').children('ul').find('li').hide(250)
        })
    })
</script>